<template>
  <view class="attrs-filter">
    <uni-collapse v-model="opens" class="list" ref="collapse">
      <template v-for="(attr, index) in data" :key="index">
        <uni-collapse-item
          class="collapse-item"
          v-if="attr?.is_search"
          :name="attr?.id"
          :border="false"
          :disabled="isdsabled"
          title-border="none"
          :show-arrow="false"
          :open="true"
        >
          <template #title>
            <view class="header">
              <view class="title">{{ attr?.attr_name }}</view>
              <!-- <view v-if="opens.indexOf(attr.id) == -1 && parseRadioOptions(attr).length > 3" class="value">{{
                getShortValue(attr)
              }}</view> -->
              <view
                class="value"
                @click="toShow(attr)"
                :class="{ isred: attr?.isShow }"
                v-if="parseRadioOptions(attr).length > 6"
              >
                {{ attr?.isShow ? "收起" : "展开" }}
                <image
                  class="iconfont"
                  :src="attr?.isShow ? iconFilterU : iconFilterD"
                ></image>
              </view>
            </view>
          </template>
          <view class="content">
            <template v-if="attr?.type == 'radio'">
              <GridSelect
                :modelValue="props.modelValue[attr?.id]"
                @update:modelValue="updateValue(attr?.id, $event, index, attr)"
                :options="parseRadioOptions(attr)"
                :columns="3"
                :show="attr?.isShow"
                filterable
                @keyword-changed="resize"
              ></GridSelect>
            </template>
            <template v-else-if="attr?.type == 'select'">
              <GridSelect
                :modelValue="props.modelValue[attr?.id]"
                @update:modelValue="updateValue(attr?.id, $event, index, attr)"
                :options="parseRadioOptions(attr)"
                :columns="3"
                multiple
                :show="attr?.isShow"
                filterable
                @keyword-changed="resize"
              ></GridSelect>
            </template>
            <template v-else-if="attr?.type == 'input_num'">
              <RangeInput
                :modelValue="props.modelValue[attr?.id]"
                @update:modelValue="updateValue(attr?.id, $event, index, attr)"
                :config="parseInputNumberConfig(attr)"
                @switch-display="resize"
              ></RangeInput>
            </template>
          </view>
        </uni-collapse-item>
      </template>
    </uni-collapse>
  </view>
</template>

<script lang="ts" setup>
import GridSelect from "@/components/grid-select/index.vue";
import RangeInput from "@/components/range-input/index.vue";
import iconFilterD from "@/assets/icon-filter-d.svg";
import iconFilterU from "@/assets/icon-filter-u.svg";
import type { GameAttr } from "@/types";
import { onMounted, ref } from "vue";
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    modelValue: { [id: number]: any };
    options?: GameAttr[];
    keysa: number;
  }>(),
  {
    modelValue: () => ({}),
  }
);
const data = ref(props.options?.map((attr, index) => {
  return {
    ...attr,
    isShow: false,
  };
})) as any;
console.log(props.keysa);

const toShow = (item: any) => {
  data.value = data.value?.map((e: any) => {
    if (item?.id == e?.id) {
     e.isShow = !e.isShow
      return{
        ...e
      }
    }
    return e;
  });
};
const isdsabled = ref(false);
const emits = defineEmits<{
  (event: "update:modelValue", value: any): void;
  (event: "change", value: any): void;
}>();

const collapse = ref(null);
const opens = ref<number[]>([]);

onMounted(() => {
  setTimeout(() => {
    isdsabled.value = true;
  }, 1000);
  // 默认展开的属性
  for (const id in props.modelValue) {
    const v = props.modelValue[id];
    if (v != undefined) {
      opens.value.push(Number(id));
    }
  }
});

const updateValue = (id: number, value: any, index: number, attr: any) => {
  // setTimeout作用是防止modelValue获取的是旧值
  setTimeout(() => {
    emits("update:modelValue", {
      ...props.modelValue,
      [id]: value,
    });
    emits("change", { attr: attr, index: index });
  });
};

const parseRadioOptions = (attr: GameAttr) => {
  try {
    const options = JSON.parse(attr.attr_value);
    if (Array.isArray(options)) {
      return options.map((e) => ({
        label: e.name,
        value: e.name,
      }));
    }
    return [];
  } catch (error) {
    return [];
  }
};

const parseInputNumberConfig = (attr: GameAttr) => {
  try {
    const json = JSON.parse(attr.attr_value || "{}");
    // json.select = [
    //     {name: '0-100', start: 0, end: 100},
    //     {name: '100-200', start: 100, end: 200},
    //     {name: '200以上', start: 200},
    // ];
    // json.slider = {
    //     min: 0,
    //     max: 5000,
    // }
    return {
      select: json?.select,
      // slider: json?.slider,
    };
  } catch (error) {
    return undefined;
  }
};

const getShortValue = (attr: GameAttr) => {
  const value = props.modelValue[attr.id];
  if (value == undefined) {
    return "";
  }
  if (attr.type == "radio") {
    return value;
  }
  if (attr.type == "select") {
    if (value.length >= 2) {
      return `已选${value.length}个`;
    }
    return value.join(",");
  }
  if (attr.type == "input_num") {
    if (value[0] != undefined && value[1] != undefined) {
      return `${value[0]}-${value[1]}`;
    } else if (value[0] != undefined) {
      return `${value[0]}以上`;
    } else if (value[1] != undefined) {
      return `${value[1]}以内`;
    }
  }
  return "";
};

const resize = () => {
  setTimeout(() => {
    collapse.value?.resize();
  });
};
</script>

<style lang="scss" scoped>
:deep(.uni-collapse-item__title-arrow) {
  margin-right: 0px;
  margin-bottom: 20rpx;
}
:deep(.uni-collapse-item__wrap) {
  height: auto !important;
}
.isred {
  color: #fe4644 !important;
}
.iconfont {
  width: 24rpx;
  height: 24rpx;
}
.collapse-item {
  margin-top: 50rpx;
}
.list > .collapse-item:nth-child(1) {
  margin-top: 0px !important;
}
.attrs-filter {
  overflow: hidden;
  width: 100%;
  border-radius: 10px;

  .header {
    padding: var(--page-padding);
    padding-right: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20rpx;
    .margintop {
      margin-top: 50rpx;
    }
    .title {
      font-size: 14px;
      font-weight: 600;
      color: #000000;
    }
    .value {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }
  }
  .content {
    padding: var(--page-padding);
    padding-top: 0;
    height: auto !important;
  }
}
.attrs-filter + .attrs-filter {
  margin-top: 10px;
}
</style>
